import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person'

class Person extends Component {

    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        const person = {
            id: nanoid(),
            name,
            age
        }
        console.log(person)
        this.props.addPerson(person)
        this.nameNode.value= ''
        this.ageNode.value = ''
    }

    render() {
        const { count, personArr } = this.props
        return (
            <div>
                <h2>我是Person组件哦</h2>
                <h4>上方求和为：{count}</h4>
                <input ref={ c => this.nameNode = c } type="text" placeholder="输入名字" />
                <input ref={ c => this.ageNode = c } type="text" placeholder="输入年龄" />
                <button onClick={ this.addPerson }>添加</button>
                <hr />
                <ul>
                    {
                        personArr.map(person => {
                            return <li key={person.id}>名字: {person.name} --- 年龄: {person.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default connect(
    state => ({ personArr: state.person, count: state.count }),
    {
        addPerson
    }
)(Person)
